<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <script src="./jquery-1.11.0.js"></script>
</head>
<body>
    <div id="warpper" style="position: relative;height:600px;width:100%;">
        <div id="outer" style="background: lightcyan;position: absolute;height:100%;width:100%;overflow:hidden;">
            <div id="inner" style="background:-webkit-linear-gradient(white,black);height:1000px;">
            </div>
        </div>
        <div id="testButton" style="background:green;position:absolute;bottom:30px;left:30px;width:100px;height:100px;border-radius:50%">
            dsfdsf   11111  2222333
        </div>
    </div>

    <script>
        $('#outer').on('touchstart',function(e){
            e.preventDefault();

        });
        $('#outer').on('touchmove',function(){
            this.scrollTop = this.scrollTop+10;
        });
        $('#outer').on('touchend',function(){


        });


    </script>


    <script>
        var direction = 1;
        var distance = 100;
        $('#testButton').on('click',function(){
            var outerE =  $('#outer').get(0);
            var sTop = outerE.scrollTop;
            var offsetHeight = outerE.offsetHeight;
            var sHeight = outerE.scrollHeight;

            if(sTop + offsetHeight == sHeight){
                direction  = -1;
            }else if(sTop == 0){
                direction  = 1;
            };
            outerE.scrollTop = sTop + distance * direction;
        });
    </script>
</body>
</html>